<template>
   <div class="cnyzs-posts">
      <div class="posts-left">
         <!-- 帖子信息 -->
         <div class="posts-content">
            <!-- 作者 -->
            <div class="content-author-info">
               <!-- 头像 -->
               <div class="info-profile" @click="Utils.viewAuthor(postsInfo.postsUserId?.id)">
                  <ClientOnly>
                     <el-popover :width="300">
                        <template #reference>
                           <el-image :src="UtilsImage(postsInfo.postsUserId?.useravatar)" fit="cover" lazy />
                        </template>
                        <template #default>
                           <div>
                              用户卡片信息：开发中
                           </div>
                        </template>
                     </el-popover>
                  </ClientOnly>
               </div>
               <!-- 信息 -->
               <div class="info-info">
                  <div class="name" @click="Utils.viewAuthor(postsInfo.postsUserId?.id)">
                     <span>{{ postsInfo.postsUserId?.username }}</span>
                  </div>
                  <div class="time">
                     <span>{{ Utils.timeDisplay(postsInfo.createdAt) }}</span>
                     <span class="lv">深圳</span>
                     <span class="lv">Lv.1</span>
                  </div>
               </div>
               <!-- 设置 -->
               <div class="info-set">
                  <div class="info-set-jiantou">
                     <ClientOnly>
                        <el-dropdown trigger="click">
                           <span class="iconfont icon-jiantou"></span>
                           <template #dropdown>
                              <el-dropdown-menu>
                                 <el-dropdown-item @click="Utils.viewAuthor(postsInfo.postsUserId?.id)">
                                    查看作者
                                 </el-dropdown-item>
                                 <el-dropdown-item v-if="userinfo?._id" @click="Utils.blacklist(postsInfo)">
                                    拉黑名单
                                 </el-dropdown-item>
                                 <el-dropdown-item v-if="userinfo?._id" @click="Utils.reportContent(postsInfo)">
                                    举报内容
                                 </el-dropdown-item>
                                 <el-dropdown-item v-if="userinfo?.userpower == 0" divided
                                    @click="Utils.globalTopping(postsInfo)">
                                    {{ postsInfo.postsGlobalTop === true ? '取消全局' : '全局置顶' }}
                                 </el-dropdown-item>
                                 <el-dropdown-item v-if="Utils.verifySystemAdmin(systemInfo, userinfo)" divided
                                    @click="Utils.contentTopping(postsInfo)">
                                    {{ postsInfo.postsTop === true ? '取消置顶' : '置顶内容' }}
                                 </el-dropdown-item>
                                 <el-dropdown-item v-if="Utils.verifySystemAdmin(systemInfo, userinfo)"
                                    @click="Utils.recommendedContent(postsInfo)">
                                    {{ postsInfo.postsRecommend === true ? '取消推荐' : '推荐内容' }}
                                 </el-dropdown-item>
                              </el-dropdown-menu>
                           </template>
                        </el-dropdown>
                     </ClientOnly>
                  </div>
               </div>
            </div>
            <!-- 标题 -->
            <div class="content-title">
               <div class="left" v-if="postsInfo?.postsTop || postsInfo?.postsRecommend">
                  <span class="top" v-if="postsInfo?.postsTop">置顶</span>
                  <span class="recommend" v-if="postsInfo?.postsRecommend">推荐</span>
               </div>
               <div class="title" v-if="postsInfo.postsTitle">{{ postsInfo.postsTitle }}</div>
            </div>
            <!-- 内容 -->
            <div class="content-content">
               <p class="list-content" v-html="postsInfo?.postsContent"
                  :style="{ fontSize: postsInfo.postsTitle ? '16px' : '18px' }">
               </p>
            </div>
            <!-- 视频 -->
            <!-- 图片 -->
            <div class="content-images">
               <ClientOnly>
                  <div v-for="(item, index) in postsInfo?.postsImages" :key="index">
                     <div style="margin-bottom: 15px;min-height:400px;background: #F5F7FA;"
                        :style="{ height: imageHeight[index] + 'px' }">
                        <el-image ref="imageRefs" :src="UtilsImage(item, true, 800)" fit="cover" :zoom-rate="1.2" lazy
                           :preview-src-list="joinimage(postsInfo.postsImages)" :initial-index="index"
                           @load="getImageHeight" />
                     </div>
                     <!-- <img style="object-fit: cover;" alt="Image" @load="onImageLoad"
                        v-lazy="UtilsImage(item, true, 800)" /> -->
                  </div>
               </ClientOnly>
            </div>
            <!-- 标签 -->
            <div class="content-topic" v-if="postsInfo.postsTags?.length > 0">
               <span># 奶爸</span>
               <span># 电动车</span>
               <span># 萌娃</span>
            </div>
            <!-- 点赞 -->
            <div class="content-like-share">
               <div class="content-like-share-left">
                  <div class="share">
                     <span class="iconfont icon-fanhui"></span>
                  </div>
               </div>
               <div class="content-like-share-right">

               </div>
            </div>
         </div>
         <!-- 帖子评论 -->
         <div class="posts-comment">
            <!-- 发布评论 -->
            <div style="padding: 20px;">
               <div style="position: relative;">
                  <div style="min-height: 105px;">
                     <ClientOnly>
                        <textarea minlength="5" v-model="state.commentContent" placeholder="来说点什么吧..."
                           style="overflow: hidden; overflow-wrap: break-word; min-height: 100px;">
                        </textarea>
                     </ClientOnly>
                  </div>
                  <div class="logintext" v-if="!userinfo.id">
                     <span>请登录之后再进行评论</span>
                     <button @click="openLogin = true">登录</button>
                  </div>
               </div>
               <div class="posts-file-btn">
                  <div class="image">
                     <iframe id="iframe_display" name="iframe_display" style="display: none;"></iframe>
                     <form action="#" method="post" enctype="multipart/form-data" target="iframe_display">
                        <input id="file" type="file" ref="file" multiple name="file" @change="uploadPictures">
                     </form>
                     <span class="iconfont icon-tupianxian"></span>
                     <span class="text">图片</span>
                  </div>
                  <div class="btn-publish">
                     <div class="submit" @click="createComment">回复</div>
                  </div>
               </div>
            </div>
            <!-- 评论内容 -->
            <div class="posts-comment-content">
               <ClientOnly>
                  <ul>
                     <!-- 指定评论 -->
                     <li ref="commentIdElement" class="li GradientAnimation commentId" v-if="state.commentId.length > 0">
                        <!-- 评论的用户 -->
                        <div class="content-author-info">
                           <!-- 头像 -->
                           <div class="info-profile" @click="Utils.viewAuthor(state.commentId[0].commentUserId?.id)">
                              <el-image :src="UtilsImage(state.commentId[0]?.commentUserId?.useravatar)" fit="cover"
                                 lazy />
                              <div class="Top" v-if="state.commentId[0]?.postsTop">置顶</div>
                           </div>
                           <!-- 信息 -->
                           <div class="info-info">
                              <div class="name" @click="Utils.viewAuthor(postsInfo.commentUserId?.id)">
                                 <span>{{ state.commentId[0]?.commentUserId?.username }}</span>
                              </div>
                              <div class="time">
                                 <span>{{ Utils.timeDisplay(state.commentId[0]?.createdAt) }}</span>
                                 <span class="lv">深圳</span>
                                 <span class="lv">Lv.1</span>
                              </div>
                           </div>
                           <!-- 设置 -->
                           <div class="info-set">
                              <div class="info-set-jiantou">
                                 <el-dropdown trigger="click" :teleported="false">
                                    <span class="iconfont icon-jiantou"></span>
                                    <template #dropdown>
                                       <el-dropdown-menu>
                                          <el-dropdown-item
                                             @click="Utils.viewAuthor(state.commentId[0]?.commentUserId?.id)">查看用户</el-dropdown-item>
                                          <el-dropdown-item v-if="userinfo?._id"
                                             @click="Utils.blacklist(state.commentId[0]?.commentUserId?._id)">拉黑名单</el-dropdown-item>
                                          <el-dropdown-item v-if="userinfo?._id" @click="">举报评论</el-dropdown-item>
                                          <el-dropdown-item
                                             v-if="userinfo?._id && postsInfo.postsUserId?._id === userinfo._id" divided
                                             @click="Utils.commentTop(state.commentId[0])">
                                             {{ state.commentId[0]?.commentTop === true ? '取消置顶' : '置顶评论' }}
                                          </el-dropdown-item>
                                       </el-dropdown-menu>
                                    </template>
                                 </el-dropdown>
                              </div>
                           </div>
                        </div>
                        <!-- 评论的内容 -->
                        <div class="content-content">
                           <p class="list-content" v-html="state.commentId[0]?.commentContent"></p>
                        </div>
                        <!-- 点赞 回复 -->
                        <div class="content-like-reply">
                           <div class="like">
                              <span class="iconfont icon-dianzan"></span>
                              <span>点赞</span>
                              <!-- <span class="iconfont icon-dianzan1" style="color: var(--aoir-color-primary);"></span>
                           <span style="color: var(--aoir-color-primary);">8</span> -->
                           </div>
                           <div class="reply">
                              <span class="iconfont icon-pinglun"></span>
                              <span>回复</span>
                           </div>
                        </div>
                        <!-- 评论的回复 -->
                        <!-- <div class="content-reply">
                        <div class="reply">
                           123
                        </div>
                     </div> -->
                     </li>
                     <!-- 置顶评论 -->
                     <li class="li GradientAnimation" v-for="(item, index) in state.commentToplist" :key="index">
                        <!-- 评论的用户 -->
                        <div class="content-author-info">
                           <!-- 头像 -->
                           <div class="info-profile" @click="Utils.viewAuthor(item.commentUserId?.id)">
                              <el-image :src="UtilsImage(item.commentUserId?.useravatar)" fit="cover" lazy />
                              <div class="Top">置顶</div>
                           </div>
                           <!-- 信息 -->
                           <div class="info-info">
                              <div class="name" @click="Utils.viewAuthor(postsInfo.commentUserId?.id)">
                                 <span>{{ item.commentUserId?.username }}</span>
                              </div>
                              <div class="time">
                                 <span>{{ Utils.timeDisplay(item.createdAt) }}</span>
                                 <span class="lv">深圳</span>
                                 <span class="lv">Lv.1</span>
                              </div>
                           </div>
                           <!-- 设置 -->
                           <div class="info-set">
                              <div class="info-set-jiantou">
                                 <el-dropdown trigger="click" :teleported="false">
                                    <span class="iconfont icon-jiantou"></span>
                                    <template #dropdown>
                                       <el-dropdown-menu>
                                          <el-dropdown-item
                                             @click="Utils.viewAuthor(item.commentUserId?.id)">查看用户</el-dropdown-item>
                                          <el-dropdown-item v-if="userinfo?._id"
                                             @click="Utils.blacklist(item.commentUserId?._id)">拉黑名单</el-dropdown-item>
                                          <el-dropdown-item v-if="userinfo?._id" @click="">举报评论</el-dropdown-item>
                                          <el-dropdown-item
                                             v-if="userinfo?._id && postsInfo.postsUserId?._id === userinfo._id" divided
                                             @click="Utils.commentTop(item)">
                                             {{ item.commentTop === true ? '取消置顶' : '置顶评论' }}
                                          </el-dropdown-item>
                                       </el-dropdown-menu>
                                    </template>
                                 </el-dropdown>
                              </div>
                           </div>
                        </div>
                        <!-- 评论的内容 -->
                        <div class="content-content">
                           <p class="list-content" v-html="item.commentContent"></p>
                        </div>
                        <!-- 点赞 回复 -->
                        <div class="content-like-reply">
                           <div class="like">
                              <span class="iconfont icon-dianzan"></span>
                              <span>点赞</span>
                              <!-- <span class="iconfont icon-dianzan1" style="color: var(--aoir-color-primary);"></span>
                           <span style="color: var(--aoir-color-primary);">8</span> -->
                           </div>
                           <div class="reply">
                              <span class="iconfont icon-pinglun"></span>
                              <span>回复</span>
                           </div>
                        </div>
                        <!-- 评论的回复 -->
                        <!-- <div class="content-reply">
                        <div class="reply">
                           123
                        </div>
                     </div> -->
                     </li>
                     <!-- 评论列表 -->
                     <li class="li GradientAnimation" v-for="(item, index) in state.commentlist" :key="index">
                        <!-- 评论的用户 -->
                        <div class="content-author-info">
                           <div class="info-profile" @click="Utils.viewAuthor(item.commentUserId?.id)">
                              <el-image :src="UtilsImage(item.commentUserId?.useravatar)" fit="cover" lazy />
                           </div>
                           <div class="info-info">
                              <div class="name" @click="Utils.viewAuthor(postsInfo.commentUserId?.id)">
                                 <span>{{ item.commentUserId?.username }}</span>
                              </div>
                              <div class="time">
                                 <span>{{ Utils.timeDisplay(item.createdAt) }}</span>
                                 <span class="lv">深圳</span>
                                 <span class="lv">Lv.1</span>
                              </div>
                           </div>
                           <div class="info-set">
                              <div class="info-set-jiantou">
                                 <el-dropdown trigger="click">
                                    <span class="iconfont icon-jiantou"></span>
                                    <template #dropdown>
                                       <el-dropdown-menu>
                                          <el-dropdown-item
                                             @click="Utils.viewAuthor(item.commentUserId?.id)">查看用户</el-dropdown-item>
                                          <el-dropdown-item v-if="userinfo?._id"
                                             @click="Utils.blacklist(item.commentUserId?._id)">拉黑名单</el-dropdown-item>
                                          <el-dropdown-item v-if="userinfo?._id" @click="">举报评论</el-dropdown-item>
                                          <el-dropdown-item
                                             v-if="userinfo?._id && postsInfo.postsUserId?._id === userinfo?._id" divided
                                             @click="Utils.commentTop(item)">
                                             {{ item.commentTop === true ? '取消置顶' : '置顶评论' }}
                                          </el-dropdown-item>
                                       </el-dropdown-menu>
                                    </template>
                                 </el-dropdown>
                              </div>
                           </div>
                        </div>
                        <!-- 评论的内容 -->
                        <div class="content-content">
                           <p class="list-content" v-html="item.commentContent"></p>
                        </div>
                        <!-- 点赞 回复 -->
                        <div class="content-like-reply">
                           <div class="like">
                              <span class="iconfont icon-dianzan"></span>
                              <span>点赞</span>
                              <!-- <span class="iconfont icon-dianzan1" style="color: var(--aoir-color-primary);"></span>
                           <span style="color: var(--aoir-color-primary);">8</span> -->
                           </div>
                           <div class="reply">
                              <span class="iconfont icon-pinglun"></span>
                              <span>回复</span>
                           </div>
                        </div>
                        <!-- 评论的回复 -->
                        <!-- <div class="content-reply">
                           <div class="reply">
                              123
                           </div>
                        </div> -->
                     </li>
                     <!-- 评论结尾 -->
                     <li class="more-comment" ref="target" v-if="state.ismore === true" @click="getMoreComment">
                        <div>
                           <span>查看更多回复</span>
                           <span class="iconfont icon-tubiao_jiyao-xiangshang"></span>
                        </div>
                     </li>
                     <li class="more-comment" v-else>
                        <div>
                           <span style="transform: none;">没有更多了</span>
                        </div>
                     </li>
                  </ul>
                  <div v-if="state.commentlist.length === 0" style="padding: 20px;">
                     <el-empty :image-size="200" description="快来抢沙发！" />
                  </div>
               </ClientOnly>
            </div>
         </div>
      </div>

      <!-- 右侧小工具 -->
      <div class="posts-right">
         <ul>
            <li class="system-info">

            </li>
         </ul>
      </div>
   </div>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus';
const { openLogin } = storeToRefs(cnyzsCommonpinia())
const { userinfo } = storeToRefs(cnyzsUserpinia())

const { commentid } = useRoute().query // 有值：查看某个评论
const props = defineProps({
   systemInfo: {
      type: Object,
      default: () => { }
   },
   postsInfo: {
      type: Object,
      default: () => { }
   }
});

const state: any = ref({
   commentToplist: [], // 置顶列表
   commentlist: [],    // 评论列表
   commentContent: '', // 评论内容
   commentImages: [],  // 评论图片
   commentId: [],      // 指定评论ID
   limit: 10, //
   page: 1, //
   ismore: true,
})

// 获取评论
const getCommentlist = () => {
   if (!props.postsInfo._id) return
   cnyzsRequest('/api/cnyzs-system-posts-comment/list', {
      method: 'POST',
      data: {
         systemId: props.postsInfo.postsSystemId,
         commentSystemPostsId: props.postsInfo._id,
         limit: state.value.limit, // 页数
         page: state.value.page,   // 页码
         commentid: commentid,     // 查询某个评论
      }
   }).then((res: any) => {
      state.value.commentToplist = res.data.toplist || [...state.value.commentToplist]
      state.value.commentlist = [...state.value.commentlist, ...res.data.list]
      state.value.commentId = res.data.commentid
      if (res.data.list.length < 10) {
         state.value.ismore = false
      }
   })
}
getCommentlist()

// 监听 postsInfo
watch(() => props.postsInfo, async (newVal, oldVal) => {
   if (newVal) {
      getCommentlist()
   }
})

// 获取更多评论
const getMoreComment = () => {
   state.value.page = state.value.page + 1
   getCommentlist()
}


// 锚点定位：定位到指定的评论ID位置
const commentIdElement: any = ref(null)
onMounted(() => {
   if (commentid) {
      const timeout1 = setTimeout(() => {
         if (commentIdElement.value && state.value.commentId.length > 0) {
            const top = commentIdElement.value.offsetTop
            window.scrollTo({
               top: top,
               behavior: "smooth"
            })
            const timeout2 = setTimeout(() => {
               window.scrollBy({
                  top: -200,
                  behavior: "smooth"
               })
               onUnmounted(() => {
                  clearTimeout(timeout1)
                  clearTimeout(timeout2)
               })
            }, 1000)
         }
      }, 100);
   }
})


// 
const onImageLoad = () => {
   console.log("图片加载完成");

}

// const target = ref(null)
// onMounted(() => {
//    const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
//       if (isIntersecting) getMoreComment()
//    }, { threshold: 0 })
// })




// 处理图片，拼接图片地址
function joinimage(imagelist: any) {
   return imagelist.map((img: string) => {
      return UtilsImage(img)
   });
}


const imageHeight: any = ref([])
function getImageHeight(e: any) {
   imageHeight.value.push(e.target.height)
}






// 选择图片 且进行压缩处理
let imgs: any = []
const uploadPictures = async (e: any) => {
   try {
      // const fileArray: any = Array.from(e.target.files)
      // const promiseList = fileArray.map((file: File) => compressImg(file))
      // const resultList = await Promise.all(promiseList)
      // const errs = resultList.filter(result => result.code !== 200)
      // imgs.push(...resultList.filter(result => result.code === 200))
      // errs.forEach(({ msg: message, type }) => ElMessage({ type, message }))
   }
   catch (error) {
      console.error('导入图片错误:', error)
   }
}

// 发布评论
const createComment = async () => {
   if (!userinfo.value.id) return ElMessage.warning('请先登录'), openLogin.value = true
   if (!state.value.commentContent) return ElMessage.warning('请输入内容')
   const res: any = await cnyzsRequest('/api/cnyzs-system-posts-comment/publish', {
      method: 'POST',
      data: {
         systemId: props.postsInfo.postsSystemId,
         commentSystemPostsId: props.postsInfo._id,
         commentContent: state.value.commentContent,
         commentImages: state.value.commentImages,
      }
   })
   if (res.status !== 200) return ElMessage.warning(res.message)
   ElMessage.success(res.message)
   state.value.commentlist = [res.data, ...state.value.commentlist]
   state.value.commentContent = ""
   state.value.commentImages = []
}



</script>
<style lang="scss" scoped>
.cnyzs-posts {
   width: var(--aoir-m-width);
   margin: 0 auto 15px;
   min-height: 1200px;
   display: flex;
   justify-content: space-between;

   .posts-left {
      width: 800px;

      .posts-content {
         width: 100%;
         background-color: #FFF;
         padding: 20px;
         border-radius: var(--aoir-border-radius);
         margin-bottom: 16px;
         box-shadow: var(--aoir-box-shadow);

         .content-author-info {
            display: flex;
            margin-bottom: 18px;

            .info-profile {
               width: 42px;
               height: 42px;
               border-radius: 25px;
               box-shadow: 0 0 10px #CCC;
               overflow: hidden;
               margin-right: 12px;
               cursor: pointer;
            }

            .info-info {
               display: flex;
               flex-direction: column;
               justify-content: space-around;

               .name {
                  font-size: 18px;
                  cursor: pointer;
                  color: #333;
                  // font-weight: 700;

                  span {
                     margin-right: 10px;
                  }
               }

               .time {
                  color: #999;
                  font-size: 14px;

                  span {
                     margin-right: 10px;
                  }

                  .lv {
                     color: #b8b8b8;
                     padding: 1px 5px;
                     font-size: 12px;
                     border-radius: 3px;
                     background: #FAFAFA;
                     font-weight: 600;
                  }

                  .set {
                     box-shadow: 0 0 4px #00000017;
                     color: var(--aoir-color-primary-2);
                     border-radius: 5px;
                     background-color: #FFF;
                     font-size: 14px;
                     padding: 0 5px;
                     font-weight: 600;
                     cursor: pointer;
                  }
               }
            }

            .info-set {
               flex: 1;
               display: flex;
               justify-content: flex-end;

               .info-set-jiantou {
                  .iconfont {
                     font-size: 25px;
                     color: #bababa;
                     cursor: pointer;
                  }
               }
            }
         }

         .content-title {
            width: 100%;
            font-size: 20px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .left {
               display: flex;
               align-items: center;
               margin-bottom: 9px;

               .top {
                  margin-right: 10px;
                  font-size: 13px;
                  font-weight: 600;
                  color: #FFF;
                  background-color: #e64355;
                  border-radius: 5px;
                  padding: 4px 8px;
                  float: left;
               }

               .recommend {
                  margin-right: 10px;
                  font-size: 13px;
                  font-weight: 600;
                  color: #FFF;
                  background-color: #5540a3;
                  border-radius: 5px;
                  padding: 4px 8px;
                  float: left;
               }
            }

            .title {
               flex: 1;
               overflow: hidden;
               display: -webkit-box;
               -webkit-line-clamp: 1;
               -webkit-box-orient: vertical;
               line-height: 1.4;
               max-height: 1.4em;
               position: relative;
               margin-bottom: 10px;
            }
         }

         .content-content {
            p {
               margin: 0px 0 15px;
               font-size: 16px;
               color: #444444;
               white-space: pre-wrap;
               line-height: 28px;
               position: relative;
            }
         }

         .content-images {
            margin-bottom: 20px;

            .el-image {
               margin-bottom: 10px;
               border-radius: var(--aoir-border-radius);
               cursor: pointer;
               animation: identifier 2s ease-in-out;

               @keyframes identifier {
                  0% {
                     opacity: 0;
                  }

                  50% {
                     opacity: 0;
                     filter: blur(5px);
                  }

                  100% {
                     opacity: 1;
                     filter: blur(0px);
                  }
               }
            }
         }

         .content-topic {
            width: 100%;
            margin-bottom: 15px;
            // padding: 0 15px;

            span {
               margin-right: 15px;
               color: #910096;
               transition: all .2s;
               font-size: 16px;
               cursor: pointer;

               &:hover {
                  opacity: 0.5;
               }
            }
         }

         .content-like-share {
            width: 100%;
            min-height: 35px;
            display: flex;
            align-items: center;

            .iconfont {
               font-size: 25px;
               color: #777;
               cursor: pointer;
            }

            .content-like-share-left {
               display: flex;
               align-items: center;
            }

            .content-like-share-right {
               flex: 1;
               display: flex;
               justify-content: flex-end;

               .share {
                  &:hover {
                     .iconfont {
                        opacity: .7;
                        transition: all .2s;
                     }
                  }
               }
            }
         }
      }

      .posts-comment {
         width: 100%;
         background-color: #FFF;
         border-radius: var(--aoir-border-radius);
         box-shadow: var(--aoir-box-shadow);

         textarea {
            border: 0;
            width: 100%;
            resize: none;
            font-size: 16px;
            line-height: 26px;
            caret-color: var(--aoir-color-primary-2);
            padding: 5px 10px;
            white-space: pre-wrap;
            border: 1px solid #e4e4e4;
            border-radius: var(--aoir-border-radius);
            background: #f5f5f530;

            &::placeholder {
               color: #CCD0DB;
               font-size: 16px;
            }
         }

         .logintext {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            padding: 5px 10px;
            white-space: pre-wrap;
            border: 1px solid #f5f6f7;
            border-radius: var(--aoir-border-radius);
            background: #ffffffb9;
            overflow: hidden;
            overflow-wrap: break-word;
            min-height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #8b8b8b;

            span {
               margin-bottom: 15px;
            }

            button {
               background-color: var(--aoir-color-primary);
               border: 0;
               box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
               color: #fdfdfd;
               cursor: pointer;
               display: flex;
               align-items: center;
               font-size: 14px;
               font-weight: 600;
               height: 35px;
               justify-content: center;
               margin-right: 15px;
               padding: 0 15px;
               transition: all 0.2s;
               border-radius: 8px;

               &:hover {
                  opacity: .8;
               }
            }
         }

         .posts-file-btn {
            min-height: 48px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f4f4f4;

            .text {
               font-size: 15px;
               color: #666666;
               cursor: pointer;
            }

            .image {
               margin-right: 22px;
               display: flex;
               justify-content: center;
               align-items: center;
               position: relative;
               cursor: pointer;

               #file {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  z-index: 1;
                  transform: translate(-50%, -50%);
                  width: 100%;
                  height: 100%;
                  opacity: 0;
                  cursor: pointer;
               }

               .iconfont {
                  margin-right: 3px;
                  font-size: 27px;
                  transform: translateY(1px);
                  color: #ff9800;
                  text-shadow: 0 0 1px #ff9800;
                  cursor: pointer;
               }

               &:hover {
                  opacity: .8;
                  cursor: pointer;
               }
            }

            .link {
               display: flex;
               align-items: center;
               cursor: pointer;

               .iconfont {
                  margin-right: 7px;
                  font-size: 16px;
                  transform: translateY(1px);
                  color: #03a9f4;
                  text-shadow: 0 0 1px #03a9f4;
               }

               &:hover {
                  opacity: .8;
               }
            }

            .btn-publish {
               flex: 1;
               margin-left: 30px;
               display: flex;
               justify-content: flex-end;

               .auth {
                  margin: 0 15px;
               }

               .submit {
                  padding: 7px 14px;
                  background-color: var(--aoir-color-primary);
                  color: #FFF;
                  font-size: 14px;
                  font-weight: 600;
                  border-radius: 5px;
                  cursor: pointer;

                  &:hover {
                     opacity: .8;
                  }

                  &:active {
                     transform: translateY(1.5px);
                  }
               }
            }
         }

         .posts-comment-content {
            width: 100%;

            ul {
               width: 100%;

               .li {
                  width: 100%;
                  display: flex;
                  flex-direction: column;
                  padding: 20px 20px 0px;

                  .content-author-info {
                     display: flex;
                     margin-bottom: 15px;

                     .info-profile {
                        width: 42px;
                        height: 42px;
                        border-radius: 25px;
                        box-shadow: 0 0 10px #CCC;
                        // overflow: hidden;
                        margin-right: 12px;
                        cursor: pointer;
                        position: relative;

                        .Top {
                           position: absolute;
                           bottom: -100%;
                           left: 50%;
                           width: 38px;
                           transform: translateX(-50%);
                           padding: 4px 6px;
                           background-color: #e33c75;
                           display: flex;
                           justify-content: center;
                           border-radius: 5px;
                           color: #FFF;
                           font-size: 12px;
                           font-weight: 700;
                        }

                        .el-image {
                           border-radius: 50%;
                        }
                     }

                     .info-info {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;

                        .name {
                           font-size: 18px;
                           cursor: pointer;
                           color: #333;

                           span {
                              margin-right: 10px;
                           }
                        }

                        .time {
                           color: #999;
                           font-size: 14px;

                           span {
                              margin-right: 10px;
                           }

                           .lv {
                              color: #b8b8b8;
                              padding: 1px 5px;
                              font-size: 12px;
                              border-radius: 3px;
                              background: #FAFAFA;
                              font-weight: 600;
                           }

                           .set {
                              box-shadow: 0 0 4px #00000017;
                              color: var(--aoir-color-primary-2);
                              border-radius: 5px;
                              background-color: #FFF;
                              font-size: 14px;
                              padding: 0 5px;
                              font-weight: 600;
                              cursor: pointer;
                           }
                        }
                     }

                     .info-set {
                        flex: 1;
                        display: flex;
                        justify-content: flex-end;

                        .info-set-jiantou {
                           .iconfont {
                              font-size: 25px;
                              color: #bababa;
                              cursor: pointer;
                           }
                        }
                     }
                  }

                  .content-content {
                     padding: 0 0 0 56px;

                     p {
                        margin: 0px 0 15px;
                        font-size: 15px;
                        color: #444444;
                        white-space: pre-wrap;
                        line-height: 28px;
                        position: relative;
                     }
                  }

                  .content-like-reply {
                     width: calc(100% - 56px);
                     font-size: 14.5px;
                     display: flex;
                     color: #98a3ae;
                     padding: 0 0 15px 0;
                     border-bottom: 1px solid #f4f4f4;
                     margin-left: 56px;

                     .iconfont {
                        margin-right: 4px;
                        font-size: 19px;
                     }

                     .like {
                        margin-right: 18px;
                        display: flex;
                        align-items: center;
                        cursor: pointer;

                        &:hover {
                           opacity: .8;
                           color: var(--aoir-color-primary);
                        }
                     }

                     .reply {
                        display: flex;
                        align-items: center;
                        cursor: pointer;

                        &:hover {
                           opacity: .8;
                           color: var(--aoir-color-primary);
                        }
                     }
                  }

                  .content-reply {
                     width: 100%;
                     padding: 0 0 0 56px;
                     margin-top: 5px;
                     margin-bottom: 10px;

                     .reply {
                        width: 100%;
                        background-color: #F5F5F5;
                        border-radius: 5px;
                        padding: 10px;
                     }
                  }
               }

               .commentId {
                  background-color: #eeeeee7d;
               }

               .more-comment {
                  width: 100%;
                  padding: 20px;

                  div {
                     width: 100%;
                     height: 55px;
                     padding: 20px;
                     border-radius: 10px;
                     background-color: #F5F5F5;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     font-size: 15px;
                     color: #666;
                     cursor: pointer;
                  }

                  span {
                     margin-right: 5px;

                     &:nth-last-child(1) {
                        margin: 0;
                        font-size: 17px;
                        color: #999;
                        transform: translateY(1px) rotateZ(180deg);
                     }
                  }
               }
            }
         }
      }
   }

   .posts-right {
      flex: 1;
      height: auto;
      margin-left: 16px;

      ul {
         width: 100%;

         li {
            margin-bottom: 16px;
         }

         .system-info {
            width: 100%;
            min-height: 200px;
            background-color: #FFF;
            padding: 20px;
            border-radius: var(--aoir-border-radius);
            box-shadow: var(--aoir-box-shadow);
         }
      }
   }

}

.placeholder {
   width: 100%;
   height: 400px;
   background-color: #03a9f4;
}
</style>